<!DOCTYPE html>
{% load static blog_tags notifications_tags %}
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="baidu-site-verification" content="GOgEP8c1pN"/>
  {% block description %}{% endblock description %}

  <title>{% if unread_count %}({{ unread_count }}) {% endif %}
    {% block title %}{{ headline }}{% endblock title %}_追梦人物的博客</title>

  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css"
        rel="stylesheet">
  <link rel="stylesheet" href="{% static 'blog/css/mobi.min.css' %}">
  <link rel="stylesheet" href="{% static 'blog/css/modal.min.css' %}">
  <link rel="stylesheet" href="{% static 'blog/css/friendly.css' %}">
  <link rel="stylesheet" href="{% static 'blog/css/blog.css' %}?v0.12">
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="{% static 'blog/js/menu.js' %}"></script>
  <script src="{% static 'blog/js/modal.min.js' %}"></script>
  <script src="{% static 'blog/js/blog.js' %}"></script>
  {% block link %}{% endblock link %}

  {% baidu_scripts %}
  {% block style %}{% endblock style %}
</head>
<body class="bg-light">
<header>
  <nav class="flex-center bg-white nav-bar">
    <div class="container-wider flex-middle">
      {% block sidebar_trigger %}{% endblock sidebar_trigger %}
      <a class="nav-bar-logo mr-7" href="{% url 'blog:index' %}">
        <img src="{% static 'blog/images/logo.png' %}" alt="blog logo">
      </a>
      <ul class="unit-0 hide-on-mobile nav-bar-nav">
        <li class="nav-item mr-7">
          <a class="nav-link" href="{% url 'blog:index' %}">首页</a>
        </li>
        <li class="nav-item mr-7">
          <a class="nav-link" href="{% url 'blog:tutorials' %}">教程</a>
        </li>
        <li class="nav-item mr-7">
          <a class="nav-link" href="{% url 'blog:categories' %}">分类</a>
        </li>
        <li class="nav-item mr-7">
          <a class="nav-link" href="{% url 'blog:archives' %}">归档</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'blog:donate' %}">赞助</a>
        </li>
      </ul>
      <div class="unit flex-right flex-middle">
        <form class="hide-on-mobile flex-left flex-middle search-form mr-5" id="search-form"
              action="{% url 'haystack_search' %}">
          <input class="unit" type="search" name="q" placeholder="搜索..."/>
          <button class="unit-0" type="submit" role="button">
            <i class="fa fa-search" aria-hidden="true"></i>
          </button>
        </form>
        <a class="show-on-mobile nav-link fs-7 mr-7" id="js-search-btn" href="#" role="button">
          <i class="fa fa-search" aria-hidden="true"></i>
        </a>
        <div class="flex-middle notification">
          {% if user.is_authenticated %}
            <a class="flex-middle nav-link fs-7" href="{% url 'notify:notification_all' %}">
              <i class="fa fa-bell-o" aria-hidden="true"></i>
              {% if unread_count %}
                <span class="notification-count fs-4">{{ unread_count }}</span>
              {% endif %}
            </a>
          {% else %}
            <a class="nav-link" href="{% url 'account_login' %}">
              <i class="fa fa-sign-in" aria-hidden="true"></i>
            </a>
          {% endif %}
        </div>
        <div class="show-on-mobile flex-middle">
          <a class="nav-link fs-7 ml-7 mr-5" id="menu-toggle" href="#">
            <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
          </a>
          <ul class="menu bg-white" data-menu data-menu-toggle="#menu-toggle">
            <li class="nav-item mr-7">
              <a class="nav-link" href="{% url 'blog:index' %}">首页</a>
            </li>
            <li>
              <a href="{% url 'blog:tutorials' %}">教程</a>
            </li>
            <li>
              <a href="{% url 'blog:categories' %}">分类</a>
            </li>
            <li>
              <a href="{% url 'blog:archives' %}">归档</a>
            </li>
            <li>
              <a href="{% url 'blog:donate' %}">赞助</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </nav>
</header>
<section class="flex-center">
  <div class="container-wider">
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
              &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">设置评论回复接收邮箱</h4>
            <div class="text-primary mt-2">邮箱仅用于接收回复提醒，不会被公开。</div>
            {% if user.email and user.email_bound %}
              <div class="text-small text-primary my-2">你已绑定邮箱：<span
                  class="text-danger">{{ user.email }}</span>，可以在下方更换绑定邮箱
              </div>
            {% endif %}
          </div>
          <div class="modal-body">
            <form class="form email-binding-form" action="{% url 'comments:email_binding' %}">
              <div class="message">
                <span class="text-danger"></span>
              </div>
              {% csrf_token %}
              <div class="flex-left units-gap">
                <label class="unit-0 text-right" for="multiple-inputs-name">邮箱: </label>
                <div class="unit">
                  <input type="email" name="email" id="id_email" placeholder="请输入绑定邮箱"/>
                </div>
                <div class="unit-0">
                  <button class="btn" id="js-send" type="button"
                          data-target="{% url 'comments:send_verification_code' %}">发送验证码
                  </button>
                </div>
              </div>
              <div class="flex-left units-gap">
                <label class="unit-0 text-right" for="multiple-inputs-name">验证码: </label>
                <div class="unit">
                  <input type="text" name="verification_code" id="id_verification_code"
                         placeholder="请输入接收到的验证码"/>
                </div>
              </div>
              <div class="flex-right">
                <button type="button" class="btn btn-danger mr-3" data-dismiss="modal">关闭</button>
                <button type="submit" class="btn btn-primary" id="js-submit">设置</button>
              </div>
            </form>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal -->
    </div>
    <div class="flex-left flex-wrap {% block units_gap %}units-gap-big{% endblock units_gap %}"
         style="margin-top: 60px">
      {% block main %}{% endblock main %}
      {% block side %}
        <aside class="unit-1-4 unit-1-on-mobile top-gap">
          <section class="bg-white card">
            <div class="card-header">
              Django学习小组 QQ 群
            </div>
            <ul>
              <li>645793268</li>
            </ul>
          </section>

          <section class="bg-white top-gap card">
            <div class="card-header">
              友情链接
              <ul>
                <li><a class="text-muted" target="_blank"
                       href="http://www.pythonzh.cn/">Python中文社区</a>
                </li>
              </ul>
            </div>
          </section>
        </aside>
      {% endblock side %}
    </div>
  </div>
</section>
<footer class="bg-white py-5 mt-5 text-small text-muted">
  <div class="flex-center">
    <div>&copy; 2017 追梦人物的博客</div>
  </div>
  <div class="flex-center">
    <div>浙ICP备 15005796号-2</div>
  </div>
</footer>
<script>
    $('[data-menu]').menu();

    var InterValObj; //timer变量，控制时间
    var curCount = 120;//当前剩余秒数

    $('#js-send').on('click', function (event) {
        var $this = $(this);
        var $targetURL = $this.attr('data-target');
        $.post(
            $targetURL,
            {email: $('#id_email').val()},
            function (data) {
                if (data.ok) {
                    $this.attr("disabled", "true");
                    $this.text("重新发送验证码" + "(" + curCount + ")");
                    InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
                    $('.message')
                        .find('span')
                        .text(data.msg)
                } else {
                    $('.message').find('span').text(data.msg)
                }
            }
        );
        return false;
    });

    //timer处理函数
    function SetRemainTime() {
        if (curCount === 0) {
            window.clearInterval(InterValObj);//停止计时器
            $('#js-send').removeAttr("disabled");//启用按钮
            $('#js-send').text("重新发送验证码");
        }
        else {
            curCount--;
            $('#js-send').text("重新发送验证码" + "(" + curCount + ")");
        }
    }

    $('#js-submit').on('click', function (event) {
        var $this = $(this);
        var $form = $('.email-binding-form');
        var $targetURL = $form.attr('action');
        console.log($targetURL);

        $.post(
            $targetURL,
            {
                email: $('#id_email').val(),
                verification_code: $('#id_verification_code').val()
            },
            function (data) {
                if (data.ok) {
                    location.reload();
                } else {
                    $('.message')
                        .find('span')
                        .text(data.msg)
                }
            }
        );
        return false;
    });


    var editor = new Simditor({
        textarea: $('#id_comment'),
        placeholder: "提出你的见解...",
        toolbarFloat: false,
        cleanPaste: true,
        toolbar: [
            'bold',
            'italic',
            'underline',
            'strikethrough',
            'color',
            'ol',
            'ul',
            'blockquote',
            'code',
            'table',
            'link',
            'image',
            'hr'
        ]
    });
</script>
{% block script %}
{% endblock script %}
</body>
</html>